<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="app">
  一、Vue的生命周期阶段<br>
  vue生命周期分为四个阶段<br>
  第一阶段（创建阶段）：beforeCreate，created<br>
  第二阶段（挂载阶段）：beforeMount，mounted<br>
  第三阶段（更新阶段）：beforeUpdate，updated<br>
  第四阶段（销毁阶段）：beforeDestroy，destroyed<br>
  <h3 id="h3">{{msg}}</h3>
    <input type="button" value="修改msg" @click="msg='No'">



<script>

  var v=new Vue({
      el:"#app",
    data:{
        msg:'OK'
    },
    methods:{
        show(){
          console.info("执行了show方法")
        }
    },
    beforeCreated(){//第一个生命周期函数，表示实例被完全创建出来前会执行她
      //   cosole.log(this.msg);
      // this.show();
      //在beforecreated生命周期函数执行的时候，data和methods在的数据还没有初始化
    },
    created(){//第二个生命周期函数
      // console.log(this.msg);
      // this.show();

      //在created中，data和methods都已经初始化好了
    //如果要调用methods中的方法或者data中的数据，最早只能在created中操作
    },
    beforeMount(){//第三个周期函数，表示模板已经在内存中编辑完成了，但尚未把模板渲染到页面中
      // console.log(document.getElementById('h3').innerText)
      //在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的模板字符串
    },
    mounted(){//第四个生命周期行数，表示内存中的模板已经能真实挂载到了页面中，页面已经渲染
      // console.log(document.getElementById('h3').innerText);
        //如果要通过某些组件操作页面上的Dom节点,最早只能在mounted中执行
    },
      //接下来的是运行中的两个事件
      beforeUpdate(){//数据肯定被更新了
          // console.log('界面上的元素内容'+document.getElementById('h3').innerText);
          // console.log('data中的msg数据是:'+this.msg)
          //当执行beforeUpdata的时候，页面中显示数据还是旧的，此时data数据是最新的，页面尚未和数据保持同步
      },
      updated(){
          console.log('界面上的元素内容'+document.getElementById('h3').innerText);
          console.log('data中的msg数据是:'+this.msg)
          //页面和data数据已经保持同步了
      },
      beforeDestroy(){
          //当执行到这个函数的时候，Vue实例已经从运行阶段进入到销毁阶段
          // 实例上的datahe所有的methods以及过滤器，指令都处于可用状态
      },
      destroyed(){
          //所有组件已经被完全销毁
      }
  })
</script>

</body>
</html>